<template>
    <div class="indexPage">

        <Head></Head>
        <div class="tabbox">
            <div class="headSty flex_str">
                <div style="margin-right: 20px;">图片名称:</div>
                <div class="IptSty">
                    <el-input v-model="rechargeParams.name" @blur="getRechargeList()"></el-input>
                </div>


                <div style="margin-right: 20px;">展示类型:</div>
                <el-select placeholder="请选择套餐状态" style="margin-right: 40px;width: 120px;" v-model="rechargeParams.type"
                    @change="changeStatus">
                    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="creatBtnSty" @click="searchRechargeList()" style="margin-right:20px;">查询</div>
                <div class="creatBtnSty" @click="creadRecharge">新建</div>

            </div>
            <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column prop="id" label="id" width="190" />
                <el-table-column prop="name" label="名称" width="120" />
                <el-table-column prop="type" label="类型" width="50" />
                <el-table-column prop="sort" label="排序" width="50" />
                <el-table-column prop="linkUrl" label="链接地址" />
                <el-table-column label="图片" width="120" :align="align">
                    <template #default="scope">
                        <img :src="scope.row.drawingUrl ? scope.row.drawingUrl : 'http://106.54.190.26:8008/picture/20221213/22/1670941119753789/1.jpg'"
                            style="width: 100px;" @mouseenter="imgHover" @mouseout="imgMouseOut">
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button link type="primary" size="small" v-if="scope.row.status != '0'"
                            @click="editRecharge(scope.row.id, scope.row)">编辑</el-button>
                        <!-- <el-button link type="primary" size="small" @click="adoptFun(scope.row.id)"
                            v-if="scope.row.status != '0'">停用</el-button>
                        <el-button link type="primary" size="small" @click="adoptFun(scope.row.id)"
                            v-if="scope.row.status == '0'">启用</el-button> -->
                        <el-button link type="primary" size="small" @click="LowerHouse(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer ">
                <el-pagination v-model:current-page="rechargeParams.current" v-model:page-size="rechargeParams.size"
                    :page-sizes="[10, 15, 30, 50, 100]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
    <creatOrEdit v-model="dialog.showCreat" @close="creatOrEditClose"></creatOrEdit>
    <editDialog v-model="dialog.showEdit" :id="rechargeId" :rowData="rowData" @close="EditClose"></editDialog>
    <img :src="imgCurrentSrc" class="img_current_sty" ref="imgCurrent">
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue"
import Head from "@/components/head/index.vue";
import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
import creatOrEdit from "./dialog/creatDialog.vue";
import editDialog from "./dialog/editDialog.vue";
import { getSwiperListApi, openOrStopDesignApi, delSwiperApi } from '@/api/index/index'
const dialog = reactive({
    showCreat: false,
    showEdit: false
})
const align = ref('center')
const rechargeParams = reactive<any>({
    name: '',
    type: null,
    current: 1,
    size: 10,
})
const total = ref(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const statusList = ref([
    {
        label: '全部',
        value: null
    },
    {
        label: '首页轮播',
        value: 1
    },
    {
        label: '搜索轮播',
        value: 2
    }, {
        label: '赏金轮播',
        value: 3
    }
])
const tableData = ref<any[]>([])

const rowData = ref<any>()

const rechargeId = ref<any>(null)

const imgCurrentSrc = ref('')
const imgCurrent = ref<HTMLTableElement>();
const imgHover = (e: any) => {
    imgCurrentSrc.value = e.target.currentSrc
    // @ts-ignore
    imgCurrent.value.style.position = 'fixed'
    // @ts-ignore
    imgCurrent.value.style.top = `${e.clientY + 20}px`
    // @ts-ignore
    imgCurrent.value.style.left = `${e.clientX - 500}px`
    // @ts-ignore
    imgCurrent.value.style.width = '340px'
}
const imgMouseOut = () => {
    imgCurrentSrc.value = ''
}
const handleSizeChange = (val: number) => {
    rechargeParams.size = val
    getRechargeList()
}
const handleCurrentChange = (val: number) => {
    rechargeParams.current = val
    getRechargeList()
}
// 编辑
const editRecharge = (id: number, res: any) => {
    rechargeId.value = id
    rowData.value = res
    dialog.showEdit = true
}
// 禁用
const adoptFun = (id: number) => {

    ElMessageBox.confirm(
        '您确认停用该设计助手吗？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            openOrStopDesignApi({
                id: id
            }).then((res: any) => {
                if (res.status == 200) {
                    ElMessage({
                        type: 'success',
                        message: '操作成功',
                    })
                    getRechargeList()
                }
            })

        })
        .catch(() => {
        })
}
// 删除用户
const LowerHouse = (id: number) => {
    ElMessageBox.confirm(
        '您确认要删除该图片吗？删除后不可恢复!',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delSwiperApi({
                id: id
            }).then((res: any) => {
                if (res.status == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getRechargeList()
                }
            })

        })
        .catch(() => {
        })
}
// 创建新的套餐
const creadRecharge = () => {
    dialog.showCreat = true
}
const creatOrEditClose = () => {
    getRechargeList()
    dialog.showCreat = false
}
const EditClose = () => {
    getRechargeList()
    dialog.showEdit = false
}
// 查询列表
const searchRechargeList = () => {
    if (rechargeParams.name == '') {
        ElMessage.warning('请输入名称')
    } else {
        getRechargeList()
    }
}

const getRechargeList = () => {
    getSwiperListApi(rechargeParams).then((res: any) => {
        tableData.value = res.data.records
        total.value = res.data.total
    })
}
const changeStatus = (num: any) => {
    rechargeParams.status = num;
    getRechargeList()
}


onMounted(() => {
    getRechargeList()
})

</script>
<style scoped>
.img_current_sty {
    z-index: 10000;
}

.creatBtnSty {
    padding: 6px 20px;
    background-color: #409EFE;
    color: #fff;
    border-radius: 6px;
}

.footer {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 20px;
}

.headSty {
    margin-bottom: 20px;
}

.IptSty {
    width: 140px;
    margin-right: 50px;
}

.timeSty {
    width: 450px;

}

.searchBtnSty {
    padding: 4px 25px;
    color: #fff;
    background-color: #409EFE;
    border-radius: 10px;
}

.indexPage {
    height: 100%;
}

.tabbox {
    width: 1560px;
    height: 87%;
    border-radius: 10px;
    padding: 20px;
}
</style>
